<template>
	<view class="all-main">
		<view class="main">
			<u-sticky>
				<view class="top">
					<view class="search">
						<view class="lefts">
							<u-search placeholder="搜索SN" :showAction="false" @focus="searchShow = true"
								v-model="keyword"></u-search>
						</view>
						<view class="rights">
							<text @click="stateShow = true">状态查询</text>
						</view>
					</view>
					<view v-if="batch==1" class="operating">
						<view class="lefts">
							<text>统计：{{total}}</text>
						</view>
						<view class="rights" @click="batchClick">
							<text v-if="total > 0">批量操作</text>
						</view>
					</view>
					<view v-else class="operating">
						<view class="lefts">
							<text @click="allSelect">全选</text>
							<text @click="cancelClick">取消</text>
						</view>
						<view class="rights">
							<text @click="rateBatchClick">修改费率</text>
							<!-- <text v-if="userInfo.rate_state == 1 || userInfo.flow_state == 1" @click="flowBatchClick">修改流量费</text> -->
						</view>
					</view>
				</view>
			</u-sticky>
			<view v-if="total > 0" class="list">
				<u-checkbox-group v-model="checkboxVal" placement="column" @change="checkboxChange">
					<view v-for="(item,index) in data" :key="index" class="items">
						<view v-if="batch == 2" class="selectBox">
							<u-checkbox :name="item.sn" :disabled="item.is_bind==2"></u-checkbox>
						</view>
						<view class="sn-info" :class="batch == 1 ? 'width100' : ''">
							<view class="tops">
								<view class="title">
									<u-icon name="hourglass" size="17" color="#2979ff"></u-icon>
									<text @click="copyFun(item.sn)">{{item.sn}}</text>
								</view>
								<view class="status">
									<text v-if="item.is_bind === 1" class="red">未绑定</text>
									<text v-else-if="item.is_bind === 2" class="green">已绑定</text>
									<text v-else class="purple">已解绑</text>
									<text v-if="item.is_active === 1" class="red">未激活</text>
									<text v-else class="green">已激活</text>
								</view>
							</view>
							<view class="rate-info">
								<view class="item">
									<view class="lefts">
										<text>费率</text>
										<text v-if="item.ratesHyb !== null">【{{item.ratesHyb.rate}}】</text>
										<text v-else>【未设置】</text>
									</view>
									<view class="rights">
										<text v-if="item.is_bind == 1 || item.is_bind === 3" @click="rateTemClick(item)" class="yellow">修改</text>
									</view>
								</view>
								<view class="item">
									<view class="lefts">
										<text>流量费</text>
										<text v-if="item.ratesHyb !== null">【{{item.ratesHyb.flowFee}}】</text>
										<text v-else>【未设置】</text>
									</view>
									<view class="rights">
										<!-- <text v-if="item.is_bind == 1 || item.is_bind === 3" @click="flowFeeTemClick(item)" class="yellow">修改</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<u-action-sheet :actions="list" @select="selectClick" :show="stateShow" cancelText="取消"
				@close="stateShow = false">
			</u-action-sheet>
			<u-popup :show="searchShow" mode="top" @close="searchShow = false" :closeOnClickOverlay="false">
				<view class="search-tc">
					<view class="top">
						<u-subsection :list="typeList" mode="subsection" :current="current"
							@change="sectionChange"></u-subsection>
					</view>
					<view class="mains">
						<view v-if="type === 1" class="item">
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入SN" border="surround" v-model="sn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="start_scan_one"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="start_scan_wx_one"></u-icon>
									<!-- #endif -->
								</view>
							</view>
						</view>
						<view v-else class="item">
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入开始SN" border="surround" v-model="startSn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="start_scan"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="start_scan_wx"></u-icon>
									<!-- #endif -->
								</view>
							</view>
							<view class="items">
								<view class="lefts">
									<u--input placeholder="请输入结束SN" border="surround" v-model="endSn"></u--input>
								</view>
								<view class="rights">
									<!-- #ifdef APP -->
									<u-icon name="scan" size="45" @click="end_scan"></u-icon>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<u-icon name="scan" size="45" @click="end_scan_wx"></u-icon>
									<!-- #endif -->
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="confirm btn" @click="searchClick">
							<text>确定</text>
						</view>
						<view class="cancel btn" @click="searchShow = false">
							<text>关闭</text>
						</view>
					</view>
				</view>
			</u-popup>
			<u-picker
				:show="brandShow"
				:columns="brandList"
				keyName="names"
				@confirm="brandConfirm"
				@cancel="brandShow = false"
				:closeOnClickOverlay="true"
				@close="brandShow = false"
			></u-picker>
			<u-overlay :show="rateShow">
				<view class="rate-main">
					<view class="main">
						<view class="rate-close">
							<u-icon name="close" @click="rateShow = false"></u-icon>
						</view>
						<view class="rate-items border-bottom">
							<view class="lefts">
								流量费
							</view>
							<view class="rights" v-if="userInfo.flow_state == 1" @click="flowFeeShow = true">
								<text>{{flowFeeTxt}}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
							<view class="rights" v-else>
								<text>{{flowFeeTxt}}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="rate-items border-bottom">
							<view class="lefts">
								流量费收费时间
							</view>
							<view class="rights" @click="flowDayShow = true">
								<text>{{flowTypeTxt}}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view v-if="flowDayInputShow" class="rate-items">
							<view class="lefts">
								第几天开始
							</view>
							<view class="rights">
								<u-number-box :step="1" :min="1" :max="30" v-model="flow_day"></u-number-box>
							</view>
						</view>
						<view class="btn" @click="temRateClick">
							<text>提交</text>
						</view>
					</view>
				</view>
			</u-overlay>
			<u-picker
				:show="flowFeeShow"
				:columns="flowFeeList"
				keyName="name"
				:defaultIndex="flowFeeIndex"
				@confirm="flowFeeConfirm"
				@cancel="flowFeeShow = false"
				:closeOnClickOverlay="true"
				@close="flowFeeShow = false"
			></u-picker>
			<u-picker
				:show="creditRateShow"
				:columns="rateList"
				keyName="name"
				:defaultIndex="rateIndex"
				@confirm="creditRateConfirm"
				@cancel="creditRateShow = false"
				:closeOnClickOverlay="true"
				@close="creditRateShow = false"
			></u-picker>
			<u-picker
				:show="flowDayShow"
				:columns="flowDayList"
				keyName="name"
				:defaultIndex="flowDayIndex"
				@confirm="flowDayConfirm"
				@cancel="flowDayShow = false"
				:closeOnClickOverlay="true"
				@close="flowDayShow = false"
			></u-picker>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				searchShow: false,
				stateShow: false,
				brandShow: false,
				rateShow: false,
				flowFeeShow: false,
				creditRateShow: false,
				flowDayShow: false,
				flowDayInputShow: false,
				sn: '',
				startSn: '',
				endSn: '',
				total: 0,
				product_id: null,
				keyword: '',
				checkboxVal: [],
				batch: 1,
				bottom: true,
				page: 1,
				data: [],
				list: [],
				brandList: [],
				typeList: ['单机具', '批量'],
				current: 0,
				type: 1,
				terminalData: null,
				brandCode: '',
				brandName: '',
				flowFeeList: [],
				flowDayList: [],
				flowDayIndex: [0],
				flowFeeIndex: [0],
				rateList: [],
				rateIndex: [0],
				temRate: {
					additionalPro: 0,
					debitRate: '',
					fdMoney: 0,
					scanRate: '',
					ysfRate: '',
				},
				flowFee: '',
				flowFeeTxt: '请选择',
				flowType: '',
				flowTypeTxt: '请选择',
				creditRate: '',
				creditRateTxt: '请选择',
				flow_day: 0,
				userInfo: {},
			}
		},
		onLoad(e) {
			this.product_id = e.id
			this.getTerminalState()
			this.getTerminalHybRates()
			this.getUserInfo()
			this.loadData()
			// 注入验证配置
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
			this.getFlowTemplate()
		},
		//上拉加载
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		methods: {
			// 搜索确定
			searchClick() {
				if (this.type == 1) {
					if (this.sn == '') {
						uni.showToast({
							title: '请输入终端SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
				} else {
					if (this.startSn == '') {
						uni.showToast({
							title: '请输入开始SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
					if (this.endSn == '') {
						uni.showToast({
							title: '请输入结束SN号',
							duration: 1000,
							icon: "none"
						});
						return false
					}
				}
				this.page = 1
				this.bottom = true
				this.data = []
				this.loadData()
				this.searchShow = false
			},
			// 切换批量
			sectionChange(index) {
				if (this.current != index) {
					this.checkboxVal = []
					this.current = index
					this.type = index + 1
				}
			},
			// 终端状态选择
			selectClick(index) {
				this.status = index.type
				this.page = 1
				this.bottom = true
				this.checkboxVal = []
				this.loadData()
				this.stateShow = false
			},
			// checkbox单个选中
			checkboxChange(n) {
				this.checkboxVal = n
			},
			// 批量点击
			batchClick() {
				this.batch = 2
			},
			// 取消批量
			cancelClick() {
				this.batch = 1
				this.checkboxVal = []
			},
			// 全选
			allSelect() {
				var _this = this
				if (this.checkboxVal.length != this.data.length) {
					this.checkboxVal = []
					this.data.forEach(function(item){
						_this.checkboxVal.push(item.sn)
					})
				} else {
					this.checkboxVal = []
				}
			},
			// 复制终端号
			copyFun(sn) {
				uni.setClipboardData({
					data: sn,
					success: function() {}
				});
			},
			// 获取费率流量卡模板
			async getUserInfo() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/getUserInfo'
				});
				if (res.code == 200) {
					uni.setStorageSync('userinfo', res.data);
					this.userInfo = res.data
				}
			},
			// 获取费率流量卡模板
			async getFlowTemplate() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getFlowHybTemplate',
					data: {
						product_id: this.product_id
					}
				});
				if (res.code == 200) {
					this.flowFeeList = [res.data.flow]
					this.rateList = [res.data.rate]
					this.temRate = res.data.templateRate
					this.flowDayList = [res.data.flowDay]
				}
			},
			// 流量费选择
			flowFeeConfirm(e) {
				this.flowFee = e.value[0].value
				this.flowFeeTxt = e.value[0].name
				this.flowFeeShow = false
			},
			// 贷记卡费率选择
			creditRateConfirm(e) {
				this.creditRate = e.value[0].value
				this.creditRateTxt = e.value[0].name
				this.creditRateShow = false
			},
			// 获取终端状态
			async getTerminalState() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getTerminalState'
				});
				if (res.code == 200) {
					this.list = res.data
				}
			},
			// 获取费率
			async getTerminalHybRates() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getTerminalHybRates',
					data: {
						product_id: this.product_id
					}
				});
				if (res.code == 200) {
					this.brandList = [res.data]
				}
			},
			// 页面数据展示
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getEquipListHyb',
					data: {
						page_size: 15,
						page: this.page,
						sn: this.sn,
						startSn: this.startSn,
						endSn: this.endSn,
						type: this.type,
						status: this.status,
						product_id: this.product_id
					},
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.total = res.data.total
					if (res.data.data !== undefined && res.data.data !== null && res.data.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data.data
						} else {
							this.data = [...this.data, ...res.data.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 获取微信配置
			injectConfig() {
				let url = window.location.href;
				uni.request({
					url: util.API_URL + '/api/v1/test',
					method: 'post',
					data: {
						url: encodeURIComponent(url)
					},
					success: (res) => {
						const data = res.data
						if (data.code == 200) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {
								console.log(err) //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
							});
						}
					},
					fail(err) {}
				});
			},
			// 单个 - APP扫码
			start_scan_one() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
					}
				});
			},
			// 单个 - 微信扫码
			start_scan_wx_one() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.sn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 批量 - APP扫码 - 开始
			start_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.startSn = res.result
					}
				});
			},
			// 批量 - 微信扫码 - 开始
			start_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.startSn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 批量 - APP扫码 - 结束
			end_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.endSn = res.result
					}
				});
			},
			// 批量 - 微信扫码 - 结束
			end_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.endSn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 修改费率 - 单机
			rateTemClick(item) {
				this.brandShow = true
				this.type = 1
				this.terminalData = item
			},
			// 修改费率 - 批量
			rateBatchClick() {
				if (this.checkboxVal.length <= 0) {
					uni.showToast({
						title: '请选择要修改的终端!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				this.type = 2
				this.brandShow = true
			},
			// 选择终端费率
			brandConfirm(e) {
				this.brandCode = e.value[0].value
				this.brandName = e.value[0].names
				this.brandShow = false
				var _this = this
				uni.showModal({
					title: '提示',
					content: '确定要更换终端的费率吗？',
					success: function(res) {
						if (res.confirm) {
							_this.brandConfirmFun()
						} else if (res.cancel) {}
					}
				});
			},
			// 修改终端费率
			async brandConfirmFun() {
				var snArr = [];
				var _this = this
				if (this.type == 1 && this.terminalData !== null) {
					snArr.push(this.terminalData.sn)
				} else if (this.type == 2) {
					snArr = this.checkboxVal
				}
				var dats = {
					product_id: this.product_id,
					sn: snArr,
					type: this.type,
					brandCode: this.brandCode,
					brandName: this.brandName,
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/terminalHybRateEdit',
					data: dats
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					_this.checkboxVal = []
					setTimeout(function() {
						_this.page = 1
						_this.bottom = true
						_this.loadData()
					},1000)
				}
			},
			// 设定流量费 - 单机具
			flowFeeTemClick(item) {
				var _this = this
				_this.flowFeeIndex = [0]
				_this.flowFee = ''
				_this.flowFeeTxt = '请选择'
				_this.flowDayIndex = [0]
				_this.flowType = ''
				_this.flowTypeTxt = '请选择'
				this.rateShow = true
				this.type = 1
				this.terminalData = item
				this.flowFeeList[0].forEach(function(items, index) {
					if (item.rates != null && items.value == item.rates.flowFee) {
						_this.flowFeeIndex = [index]
						_this.flowFee = items.value
						_this.flowFeeTxt = items.name
					}
				})
			},
			// 选择流量费方式
			flowDayConfirm(e) {
				this.flowType = e.value[0].value
				this.flowTypeTxt = e.value[0].name
				if (e.value[0].value == 1) {
					this.flow_day = 1
					this.flowDayInputShow = true
				} else {
					this.flowDayInputShow = false
					this.flow_day = e.value[0].value
				}
				this.flowDayShow = false
			},
			// 修改流量费 - 批量
			flowBatchClick() {
				if (this.checkboxVal.length <= 0) {
					uni.showToast({
						title: '请选择要设定的终端!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				this.type = 2
				this.rateShow = true
			},
			// 确定设置流量费
			temRateClick() {
				if (this.flowFee === '') {
					uni.showToast({
						title: '请选择流量费!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				this.rateShow = false
				var _this = this
				uni.showModal({
					title: '提示',
					content: '确定要设定流量费吗？',
					success: function(res) {
						if (res.confirm) {
							_this.temRateClickFun()
						} else if (res.cancel) {}
					}
				});
			},
			// 设定流量费
			async temRateClickFun() {
				var snArr = [];
				var _this = this
				if (this.type == 1 && this.terminalData !== null) {
					snArr.push(this.terminalData.sn)
				} else if (this.type == 2) {
					snArr = this.checkboxVal
				}
				var dats = {
					product_id: this.product_id,
					sn: snArr,
					type: this.type,
					op_type: 2,
					flowFee: this.flowFee,
					flowType: this.flowType,
					flowDay: this.flow_day,
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/terminalHybRateEdit',
					data: dats
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					_this.checkboxVal = []
					setTimeout(function() {
						_this.page = 1
						_this.bottom = true
						_this.loadData()
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F6FC;
	}

	.all-main {
		.main {
			.top {
				background-color: #ffffff;
				padding: 0 20rpx;

				.search {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #f4f4f5;

					.rights {
						font-size: 28rpx;

						text {
							padding: 10rpx 20rpx;
							background-color: #909399;
							color: #ffffff;
							border-radius: 16rpx;
						}
					}
				}

				.operating {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;

					.lefts {
						color: #82848a;

						text {
							padding: 4rpx 20rpx;
							border: 1px solid #82848a;
							border-radius: 10rpx;
						}

						text:nth-child(2) {
							border: 1px solid #fa3534;
							color: #fa3534;
							margin-left: 20rpx;
						}
					}

					.rights {
						text {
							padding: 4rpx 20rpx;
							border-radius: 10rpx;
						}

						text:nth-child(1) {
							border: 1px solid #2979ff;
							color: #2979ff;
						}

						text:nth-child(2) {
							margin-left: 20rpx;
							border: 1px solid #ff9900;
							color: #ff9900;
						}
					}
				}
			}

			.list {
				margin-top: 20rpx;
				padding: 0 20rpx;

				.items {
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					background-color: #ffffff;
					box-shadow: 0 0 16px -14px #333;
					display: flex;
					align-items: center;

					.selectBox {
						width: 10%;
					}

					.sn-info {
						width: 90%;

						.tops {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-bottom: 20rpx;
							border-bottom: 1px solid #f4f4f5;

							.title {
								display: flex;
								align-items: center;

								text {
									font-weight: bold;
									padding-left: 6rpx;
								}
							}

							.status {
								font-size: 24rpx;

								text {
									padding: 4rpx 10rpx;
									color: #ffffff;
									border-radius: 8rpx;
									margin-left: 10rpx;
								}

								.red {
									background-color: #fa3534;
								}

								.green {
									background-color: #19be6b;
								}
								
								.purple {
									background-color: #a233c6;
								}
							}
						}

						.rate-info {

							.item {
								padding: 30rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 28rpx;

								.rights {
									text {
										font-size: 24rpx;
										padding: 4rpx 20rpx;
										border-radius: 8rpx;
										margin-left: 20rpx;
									}

									.blue {
										border: 1px solid #2979ff;
										color: #2979ff;
									}

									.yellow {
										border: 1px solid #ff9900;
										color: #ff9900;
									}
								}
							}

							.item:nth-child(1) {
								border-bottom: 1px solid #f4f4f5;
							}

							.item:nth-child(2) {
								border-bottom: 1px solid #f4f4f5;
							}
						}
					}

					.width100 {
						width: 100% !important;
					}
				}
			}

			.search-tc {
				.top {
					padding: 30rpx;
				}
				
				.mains {
					padding: 0 30rpx;
					
					.item {
						.items {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;
							
							.lefts {
								width: 85%;
							}
							
							.rights {
								display: flex;
								justify-content: flex-end;
								width: 15%;
							}
						}
					}
				}
				
				.bottom {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.btn {
						color: #ffffff;
						padding: 10rpx;
						border-radius: 16rpx;
						width: 45%;
						text-align: center;
					}
					
					.confirm {
						background-color: #2979ff;
					}
					
					.cancel {
						background-color: #909399;
					}
				}
			}
		
			.rate-main {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				
				.main {
					width: 80%;
					background-color: #ffffff;
					border-radius: 16rpx;
					padding: 30rpx;
					
					.rate-close {
						display: flex;
						justify-content: flex-end;
						padding-bottom: 20rpx;
					}
					
					.rate-items {
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.rights {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							
							text {
								color: #82848a;
								font-size: 28rpx;
								padding-right: 10rpx;
							}
						}
					}
					
					.border-bottom {
						border-bottom: 1px solid #f4f4f5;
					}
					
					.btn {
						background-color: #2979ff;
						color: #ffffff;
						font-size: 36rpx;
						padding: 30rpx;
						border-radius: 20rpx;
						text-align: center;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>